<template>
  <div class="swiper-item" ref="bgColor" :style="{backgroundImage:'url('+ bgUrl[0] +')'}">

    <div class="wrap">
      <!-- Swiper -->
      <div class="swiper mySwiper">
        <div class="download">
          <div class="side-download">
            <a href="https://music.163.com/download"></a>
          </div>
        </div>
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item,index) in bannerList" :key="index"
               style="cursor: pointer"
               :data-type="item.targetType"
               :data-id="item.targetId"
               :data-url="item.url"
          >
            <a  style="pointer-events: none">
              <img :src="item.imageUrl" alt="">
            </a>

          </div>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";

import Swiper from "swiper";
import 'swiper/css/swiper.min.css'

export default {
  name: "index",
  data() {
    return {
      bgUrl: [

        'http://p1.music.126.net/Z2Uy8BgPZtRE5te8f7uNzA==/109951167843433171.jpg?imageView&blur=40x20',
        'http://p1.music.126.net/Ux-YPoWUWWEfjRgpngDLDA==/109951167840624797.jpg?imageView&blur=40x20',
        'http://p1.music.126.net/I97JsrGA0S7J10QvR9lupQ==/109951167840948504.jpg?imageView&blur=40x20',
        'http://p1.music.126.net/02Un7oERtI4VLCSXnSzmIQ==/109951167840594867.jpg?imageView&blur=40x20',
        'http://p1.music.126.net/RtvlrkPlj5Ou5dVo3ShzfA==/109951167840618209.jpg?imageView&blur=40x20',
        'http://p1.music.126.net/-fe5pgZ4epDCpUraGf6Hsg==/109951167843472672.jpg?imageView&blur=40x20',
        'http://p1.music.126.net/ug2oPDD9u7eTWlJnccamSA==/109951167840602853.jpg?imageView&blur=40x20',
        'http://p1.music.126.net/vyk_fYIQZP4x2VUztlKzHg==/109951167843477262.jpg?imageView&blur=40x20',

      ],
      imgIndex: 0
    }
  },
  computed: {
    ...mapState('banner', ['bannerList'])
  },
  methods: {
    mySwiper() {
      const that = this
      setTimeout(() => {
        new Swiper(".mySwiper", {
          autoplay: {
            delay: 3000
          },
          observe: true,
          observeParents: false,
          spaceBetween: 50,
          effect: "fade",
          loop: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
          on:{
            click:function (e) {
              let type = e.target.getAttribute('data-type')
              let id = e.target.getAttribute('data-id')
              let url = e.target.getAttribute('data-url')
              if (url==null){
                if (type == '1') {
                  that.$router.push({name: 'SongDetail', params: {id: id}})
                  console.log(id)
                } else if (type == '10') {
                  that.$router.push({name: 'AlbumDetail', params: {id: id}})
                }else if (type =='100'){
                  that.$router.push({name: 'RecommendDetail', params: {id: id}})
                }
              }else {
                window.open(url)
              }

            }
          }
        });
        // const bgColor = this.$refs.bgColor;
        // swiper.on('slideChangeTransitionStart', function () {
        //   bgColor.style.transition = "all 0.3s";
        //   bgColor.style = `background-image:url('${that.bannerList[swiper.realIndex].imageUrl}')`
        // });
      }, 500)
    }
  },
  mounted() {
    this.$store.dispatch('banner/GetBanner')
    this.mySwiper()
  },
}
</script>

<style lang="less" scoped>
.download {
  width: 254px;
  height: 285px;
  position: absolute;
  right: 0;
  z-index: 999;
  background: url("../../assets/download.png") no-repeat 0 0;

  .side-download {
    width: 215px;
    height: 56px;
    margin: 186px 0 0 19px;

    a {
      display: block;
      width: 215px;
      height: 56px;
    }
  }
}

.swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: 10px;
  left: -100px;
  width: 100%;
}

.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 100%;
  opacity: 1;
  background: #CFDDDF !important;
}

.swiper {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
    left: -60px;
    right: auto;
  }

  .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    right: -60px;
    left: auto;
  }
}

.swiper-pagination-bullet-active {
  background: #B81313 !important;
}


.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide a {
  width: 100%;
  height: 100%;
}
.swiper-slide div {
  width: 100%;
  height: 100%;
}
.swiper-slide a img {
  display: block;
  width: 730px;
  height: 284px;
  object-fit: cover;
}
.swiper-slide div img {
  display: block;
  width: 730px;
  height: 284px;
  object-fit: cover;
}
.swiper-item {
  width: 100%;
  height: 285px;
  transition: all 0.1s;
  background-size: 6000px;
  background-position: center center;

  .wrap {
    width: 982px;
    height: 285px;
    margin: 0 auto;
    position: relative;
    background-color: pink;
  }
}

</style>
